<template>
	<div class="container">
		<div class="main">
			<h1>{{ site_title }}触摸屏分拣系统</h1>
			<div class="black_box">
				<h2>登录</h2>
				<div class="form_keyboard">
					<div class="login_form">
						<div class="item">
							<div class="title" style="padding-left: 2px">
								<el-select v-model="login_account" placeholder="请选择">
									<el-option
										v-for="item in options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									>
									</el-option>
								</el-select>
							</div>
							<input
								type="text"
								ref="id"
								v-model="id"
								@click="isFirst = true"
							/>
						</div>
						<div class="item">
							<div class="title passsword">密码</div>
							<input
								type="password"
								v-model="password"
								@click="isFirst = false"
							/>
						</div>
						<div class="submit" type="password" @click="submit">登录</div>
					</div>
					<div class="keyboard">
						<div
							class="item no_select"
							v-for="item in 9"
							:key="item"
							@click="handleNumber(item)"
						>
							{{ item }}
						</div>
						<div class="item no_select" @click="handleNumber(0)">0</div>
						<div class="item clear no_select" @click="remove">清除</div>
						<div class="item no_select" @click="backspace">
							<img src="@/assets/images/delete.png" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { setToken } from "@/utils/auth";
import { login, getInfo } from "@/api/login";
export default {
	data() {
		return {
			focus: "",
			isFirst: true,
			login_account: "1",
			options: [
				{
					value: "1",
					label: "ID",
				},
				{
					value: "2",
					label: "用户名",
				},
			],
			// 账号密码
			id: "",
			password: "",
			site_title: "",
		};
	},
	methods: {
		submit() {
			if (this.id == "") {
				this.$message.error("账号不能为空");
				return;
			}
			if (this.password == "") {
				this.$message.error("密码不能为空");
				return;
			}
			let form = {
				name: this.id,
				password: this.password,
				status: this.login_account,
			};
			let data = Object.assign(
				{
					sign: Md5(
						objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
					),
				},
				apiUrl().name,
				form
			);
			login(data)
				.then((res) => {
					if (res.errcode == 0) {
						let token =
							res.data.original.token_type +
							" " +
							res.data.original.access_token;
						setToken(token);
						this.$router.push({ path: "/" });
					} else {
						this.$message.error(res.errmsg);
					}
				})
				.catch((err) => {
					console.log(err);
				});
		},
		// 键盘输入
		handleNumber(number) {
			if (this.isFirst == true) {
				this.id += number;
			} else {
				this.password += number;
			}
		},
		//清除
		remove() {
			var that = this;
			if (that.isFirst == true) {
				that.id = "";
			} else {
				that.password = "";
			}
		},
		//退格
		backspace() {
			var that = this;
			if (that.isFirst == true) {
				that.id = that.id.substring(0, that.id.length - 1);
			} else {
				that.password = that.password.substring(0, that.password.length - 1);
			}
		},

		getInfo() {
			let data = Object.assign(
				{
					sign: Md5(
						objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
					),
				},
				apiUrl().name
			);
			getInfo(data)
				.then((res) => {
					if (res.errcode == 0) {
						// console.log(res);
						this.site_title = res.data.site_title;
					}
				})
				.catch((err) => {});
		},
	},
	mounted() {
		this.$refs.id.focus();
		this.getInfo();
	},
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #c6e3c5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.main {
	width: 11.95rem;
	height: 7.025rem;

	h1 {
		font-size: 0.45rem;
		font-family: PingFang SC;
		font-weight: bold;
		color: #208b69;
		text-align: center;
	}
	.black_box {
		width: 10.7rem;
		height: 5.35rem;
		background-color: #4f5b4f;
		border-radius: 0.1875rem;
		margin: 0 auto;
		margin-top: 0.4375rem;
		h2 {
			font-size: 0.25rem;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			padding: 0.5rem 0;
			text-align: center;
		}
	}
}

.form_keyboard {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 0.75rem;
	.login_form {
		width: 4.4125rem;
		.item {
			width: 100%;
			height: 0.7375rem;
			margin-bottom: 0.3875rem;
			background-color: #fff;
			border-radius: 0.25rem;
			overflow: hidden;
			display: flex;
			flex-direction: row;
			align-items: center;
			.title {
				width: 1.125rem;
				min-width: 60px;
				flex-grow: 0;
				text-align: center;
			}
			input {
				border: none;
				outline: none;
				font-size: 0.25rem;
			}
			.passsword {
				font-size: 0.2375rem;
				font-family: PingFang SC;
				font-weight: 400;
				color: #acacac;
			}
		}
		.submit {
			width: 100%;
			height: 0.7375rem;
			margin-bottom: 0.3875rem;
			background-color: #4fa388;
			// background: linear-gradient(90deg, #4e9d84, #a0e2cd);
			border-radius: 0.25rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: 0.2375rem;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 40px;
			letter-spacing: 0.1rem;
			cursor: pointer;
			// box-shadow: 0px 4px 5px #76b4a1 inset;
			box-shadow: inset 0px 5px 5px -5px #fff, inset 0px -10px 10px -8px #111;
		}
	}
	.keyboard {
		width: 3.675rem;
	}
}
/deep/.el-dropdown-link {
	font-size: 0.2375rem;
	font-family: PingFang SC;
	font-weight: 400;
	color: #acacac;
}
/deep/.el-icon-arrow-down {
	font-size: 0.2rem;
	font-family: PingFang SC;
	font-weight: 400;
	color: #acacac;
}
.keyboard {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.item {
		width: 1.025rem;
		height: 0.6125rem;
		background-color: #55a38a;
		box-shadow: inset 0px 5px 5px -5px #fff, inset 0px -10px 10px -8px #111;
		border-radius: 0.1rem;
		margin-bottom: 0.2rem;
		font-size: 0.2875rem;
		font-family: PingFang SC;
		font-weight: 400;
		color: #fefefe;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		&.clear {
			font-size: 0.2125rem;
		}
		img {
			width: 0.325rem;
		}
	}
}
/deep/ .el-input__inner {
	padding: 0;
	border: none;
	padding-left: 0.125rem;

	font-size: 0.2375rem;
	font-family: PingFang SC;
	font-weight: 400;
	color: #acacac;
}
</style>
